<template>
	<view class="content">
		<view class="">
			<c-navBar title="抗遗忘记录"></c-navBar>
			<!-- <c-navBar title="教务数据"></c-navBar> -->
			<Filter @startSearch="startSearch" :compList="compList" />
		</view>

		<view class="forgetting-list">
			<c-list  :finished="finished" v-model:loading="loading" v-model:error="error"
				error-text="请求失败，点击重新加载" @load="Loads" >
				<van-empty description="暂无数据" v-if="list.length === 0" />
				<view class="forgetting-item" v-for="item in list" :key="item.id">
					<view class="forgetting-name"> {{ item.username }} </view> 
					<view class="forgetting-tab"> 
						<view class="forgetting-tab-top">
							<view class="tab-item">
								<text class="tab-item-title">需复习次数</text>
								<text class="tab-item-text">{{ item.need_num }}</text>
							</view>
							<view class="tab-item">
								<text class="tab-item-title">复习坚持率</text>
								<text class="tab-item-text tab-item-success">{{ item.not_num }}%</text>
							</view>
						</view>
						<view class="forgetting-tab-bottom forgetting-tab-top">
							<view class="tab-item">
								<text class="tab-item-title">实际复习次数</text>
								<text class="tab-item-text">{{ item.is_num }}</text>
							</view>
							<view class="tab-item">
								<text class="tab-item-title">未复习次数</text>
								<text class="tab-item-text">{{
			        item.need_num - item.is_num
			      }}</text>
							</view>
						</view>
					</view>
				</view>
			</c-list>
		</view>
		
	</view>
</template>

<script setup>
	import Filter from "../../components/filter/filter.vue"
	import {
		getCurrentDate
	} from "@/utils"
	// import {
	// 	getTimeDate
	// } from "../../utils/index.js"
	import mescrollUni from "../../components/mescroll/mescroll-uni.vue"
	import {
		getAntiForgettingLog
	} from "@/apis/forgottenRecords.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		start_date: getCurrentDate(),
		end_date: getCurrentDate(),
		search_data: "",
		page: 0,
		size: 10,
		total: 0
	})
	const compList = ["keword"]
	const list = ref([])
	const error = ref(false)
	const loading = ref(false)
	const finished = ref(false)
	const actions = [{
			text: "选项一"
		},
		{
			text: "选项二"
		},
		{
			text: "选项三"
		}
	]
	onLoad(() => {
		Loads()
	})

	const emitTime = (data) => {}
	const onSelect = (action) => {}
	const Loads = () => {
		pramas.page++
		getList()
	}
	const startSearch = (query) => {
		console.log(query)

		pramas.page = 0
		list.value = []
		pramas.start_date = query.dateRange[0] || ""
		pramas.end_date = query.dateRange[1] || ""
		pramas.search_data = query.keyword
		Loads()
	}
	const getList = () => {
		loading.value = true
		getAntiForgettingLog(pramas)
			.then((res) => {
				if (res.code === 1) {
					list.value = list.value.concat(res.data.data)
					pramas.total = res.data.total
					loading.value = false
					if (res.data.data.length===0) {
						finished.value = true
					}
				} else {
					error.value = true
					loading.value = false
					pramas.page--
				}
			})
			.catch((err) => {
				error.value = true
				loading.value = false
				pramas.page--
			})
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	} 
	.forgetting-list{
		
		width: 100%;
		flex: 1;
		overflow: hidden;
	}
	.type-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 192.76rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		border: 1.75rpx solid rgba(252, 247, 247, 1);

		text {
			font-size: 21.03rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30.46rpx;
			color: rgba(102, 102, 102, 1);
			margin-right: 28rpx;
		}

		.type-item-icon {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
		}
	}

	.value-item {
		width: 520.44rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		margin-left: 9rpx;
		border: 1.75rpx solid rgba(252, 247, 247, 1);

		.uni-input {
			height: 66.59rpx;
			width: 345.21rpx;
			padding: 0 23rpx;
		}
	}

	.seach-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 101.64rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(166, 166, 166, 1);
		border: 1.75rpx solid rgba(252, 247, 247, 1);
		margin-left: 26rpx;

		text {
			font-size: 21.03rpx;
			line-height: 30.46rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.forgetting-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: calc(100vh - 302rpx);
		overflow-y: auto;
	}

	.forgetting-item {
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 21rpx 23rpx;
		width: 678.15rpx;
		height: 162.97rpx;
		opacity: 1;
		border-radius: 8.76rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
		margin-bottom: 21rpx;
	}

	.forgetting-name {
		width: 135rpx;
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		text-align: left;
	}

	.forgetting-tab {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.forgetting-tab-top {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.forgetting-tab-bottom {
		margin-top: 33rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(50% - 34rpx);
	}

	.tab-item-title {
		font-size: 24.53rpx;
		color: rgba(102, 102, 102, 1);
		line-height: 37rpx;
	}

	.tab-item-text {
		font-size: 24.53rpx;
		line-height: 37rpx;
		text-align: left;
		color: rgba(51, 51, 51, 1);
	}

	.tab-item-success {
		/** 文本1 */
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(232, 21, 21, 1);
		line-height: 37rpx;
	}
</style>